<template>
  <div>
    <!-- 标题模块 -->
    <div>
      <van-nav-bar
        title="修改密码"
        left-arrow
        @click-left="$router.back()"
      />
    </div>
    <!-- 修改密码模块 -->

    <van-form @submit="passwordbox">
      <van-field
        v-model="loginForm.OldPassword"
        type="password"
        name="旧密码"
        label="旧密码"
        placeholder="请输入旧密码"
        :rules="loginFormRules.OldPassword"
      />
      <van-field
        class="newpassword"
        v-model="loginForm.NewPassword"
        type="password"
        name="新密码"
        label="新密码"
        placeholder="请输入新密码"
        :rules="loginFormRules.NewPassword"
      />
      <van-field
        v-model="loginForm.ConfirmPassword"
        type="password"
        name="再次输入密码"
        label="确认密码"
        placeholder="请再次输入新密码"
        :rules="loginFormRules.ConfirmPassword"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { passwordrun } from '@/api/address'
export default {
  name: 'Password',
  data () {
    return {
      loginForm: {
        OldPassword: '',
        NewPassword: '',
        ConfirmPassword: ''
      },
      loginFormRules: {
        OldPassword: [
          { required: true, message: '请输入旧密码' },
          {
            validator: (value, rule) => {
              value = value.trim()
              return value.length >= 6 && value.length <= 15
            },
            message: '长度在 6 到 15 个字符'
          }
        ],
        NewPassword: [
          { required: true, message: '请输入新密码' },
          {
            validator: (value, rule) => {
              value = value.trim()
              return value.length >= 6 && value.length <= 15
            },
            message: '长度在 6 到 15 个字符'
          }
        ],
        ConfirmPassword: [
          { required: true, message: '请再次输入新密码' },
          {
            validator: (value, rule) => {
              value = value.trim()
              return value.length >= 6 && value.length <= 15
            },
            message: '长度在 6 到 15 个字符'
          }
        ]
      }
    }
  },
  created () {
  },
  mounted () {

  },
  methods: {
    async passwordbox () {
      try {
        const { data } = await passwordrun({
          oldPwd: this.loginForm.OldPassword,
          newPwd: this.loginForm.NewPassword
        })
        console.log(data)
        if (data.meta.status !== 200) {
          this.$toast(data.meta.msg)
        } else {
          this.$toast('修改成功')
          this.$router.back()
        }
      } catch (err) {
        this.$mount('修改失败')
      }
    }
  }
}
</script>

<style scoped lang="less">
  .newpassword {
    margin-top: 15px;
  }
  .van-nav-bar {
      background-color: #f93e2e;
      /deep/.van-nav-bar__title {
        color: #fff;
      }
      /deep/.van-icon {
        color: #fff;
        font-size: 40px;
      }
    }
</style>
